<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            display: none;
        }
        .tab .active {
            color: red;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>

    <div class="tab">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <p class="show">1</p>
        <p>2</p>
        <p>3</p>
    </div>

    <script>

        const oBtns = document.querySelectorAll('button') ;
        const oPs = document.querySelectorAll('p') ;

        console.log(oBtns);

        // 循环绑定事件
        // for(var i = 0 ; i < oBtns.length ; i++) {
        //     // 给按钮这个对象绑定自定义属性  ---  方便找下标
        //     oBtns[i].index = i ;
        //     console.dir(oBtns[i]);

        //     oBtns[i].onclick = function() {
        //         // 清除所有的样式
        //         for(var j = 0 ; j < oBtns.length ; j++) {
        //             oBtns[j].classList.remove('active') ;
        //             oPs[j].classList.remove('show') ;
        //         }
        //         // 给当前添加
        //         this.classList.add('active') ;
        //         // this对应的那一个p显示即可
        //         oPs[this.index].classList.add('show') ;
        //     }
        // }








        // for(var i = 0 ; i < oBtns.length ; i++) {
        //     // 给按钮这个标签绑定自定义属性  ---  方便找下标
        //     oBtns[i].setAttribute('index' , i) ;
            
        //     oBtns[i].onclick = function() {
        //         // 清除所有的样式
        //         for(var j = 0 ; j < oBtns.length ; j++) {
        //             oBtns[j].classList.remove('active') ;
        //             oPs[j].classList.remove('show') ;
        //         }
        //         // 给当前添加
        //         this.classList.add('active') ;
        //         // this对应的那一个p显示即可
        //         oPs[this.getAttribute('index')].classList.add('show') ;
        //     }
        // }


        // {
        //     var i = 0 ; 
        //     oBtns[i].onclick = function(){
        //         console.log(i);
        //     }
        // }

        // {
        //     var i = 1 ; 
        //     oBtns[i].onclick = function(){
        //         console.log(i);
        //     }
        // }

        // {
        //     var i = 2 ; 
        //     oBtns[i].onclick = function(){
        //         console.log(i);
        //     }
        // }

        // {
        //     i = 3 ;
        // }





        // 使用let  块级作用域
        // for(let i = 0 ; i < oBtns.length ; i++) {
        //     oBtns[i].onclick = function() {
        //         // 清除所有的样式
        //         for(var j = 0 ; j < oBtns.length ; j++) {
        //             oBtns[j].classList.remove('active') ;
        //             oPs[j].classList.remove('show') ;
        //         }
        //         // 给当前添加
        //         this.classList.add('active') ;
        //         oPs[i].classList.add('show') ;
        //     }
        // }



        // 循环绑定事件   形参是局部变量
        oBtns.forEach(function(v , i) {
            // console.log(v , i);
            v.onclick = function() {
                oBtns.forEach(function(val , j){
                    val.classList.remove('active') ;
                    oPs[j].classList.remove('show') ;
                })

                v.classList.add('active') ;
                oPs[i].classList.add('show') ;
            }
        })





    </script>
    
</body>
</html>